@extends('layouts.app')

@section('title', $post->title)

@section('content')
<!-- Article Hero Section -->
<div class="article-hero">
    <div class="container">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb breadcrumb-modern">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}">
                        <i class="bi bi-house-door"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('posts.index') }}">
                        <i class="bi bi-file-text"></i>
                        <span>文章</span>
                    </a>
                </li>
                @if($post->category)
                    <li class="breadcrumb-item">
                        <a href="{{ route('categories.show', $post->category->slug) }}">
                            <i class="bi bi-folder"></i>
                            <span>{{ $post->category->name }}</span>
                        </a>
                    </li>
                @endif
                <li class="breadcrumb-item active" aria-current="page">
                    <span>{{ Str::limit($post->title, 30) }}</span>
                </li>
            </ol>
        </nav>

        <!-- Article Header -->
        <div class="article-header text-center">
            <!-- Category Badge -->
            @if($post->category)
                <div class="article-category mb-3">
                    <a href="{{ route('categories.show', $post->category->slug) }}" class="category-badge">
                        <i class="bi bi-folder"></i>
                        {{ $post->category->name }}
                    </a>
                </div>
            @endif

            <!-- Title -->
            <h1 class="article-title mb-4">{{ $post->title }}</h1>

            <!-- Meta Information -->
            <div class="article-meta">
                <div class="meta-item">
                    <div class="author-info">
                        <div class="author-avatar">
                            <i class="bi bi-person-circle"></i>
                        </div>
                        <div class="author-details">
                            <span class="author-name">{{ $post->user->name ?? '管理员' }}</span>
                            <span class="author-role">作者</span>
                        </div>
                    </div>
                </div>
                
                <div class="meta-divider"></div>
                
                <div class="meta-item">
                    <i class="bi bi-calendar3"></i>
                    <span>{{ $post->published_at->format('Y年m月d日') }}</span>
                </div>
                
                <div class="meta-divider"></div>
                
                <div class="meta-item">
                    <i class="bi bi-clock"></i>
                    <span>{{ ceil(str_word_count(strip_tags($post->content)) / 200) }} 分钟阅读</span>
                </div>
                
                @if($post->tags->count() > 0)
                    <div class="meta-divider"></div>
                    <div class="meta-item">
                        <i class="bi bi-tags"></i>
                        <span>{{ $post->tags->count() }} 个标签</span>
                    </div>
                @endif
            </div>

            <!-- Tags -->
            @if($post->tags->count() > 0)
                <div class="article-tags mt-4">
                    @foreach($post->tags as $tag)
                        <a href="{{ route('tags.show', $tag->slug) }}" class="tag-modern">
                            #{{ $tag->name }}
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Article Content -->
<div class="article-content-wrapper">
    <div class="container">
        <div class="row justify-content-center">
            <!-- Main Content -->
            <div class="col-lg-8">
                <article class="article-main">
                    <!-- Cover Image -->
                    @if($post->cover_image_id)
                        <div class="article-cover mb-5">
                            <img src="{{ $post->coverImage->url ?? '' }}" 
                                 class="cover-image" 
                                 alt="{{ $post->title }}"
                                 loading="lazy">
                        </div>
                    @endif

                    <!-- Post Excerpt -->
                    @if($post->excerpt)
                        <div class="article-excerpt">
                            <div class="excerpt-content">
                                <i class="bi bi-quote excerpt-icon"></i>
                                <p>{{ $post->excerpt }}</p>
                            </div>
                        </div>
                    @endif

                    <!-- Post Content -->
                    <div class="post-content">
                        {!! $post->content !!}
                    </div>

                    <!-- Article Footer -->
                    <div class="article-footer">
                        <!-- Share Section -->
                        <div class="share-section">
                            <h5 class="share-title">
                                <i class="bi bi-share"></i>
                                分享这篇文章
                            </h5>
                            <div class="share-buttons">
                                <button class="share-btn weibo" onclick="shareToWeibo()" title="分享到微博">
                                    <i class="bi bi-share"></i>
                                    <span>微博</span>
                                </button>
                                <button class="share-btn wechat" onclick="shareToWechat()" title="分享到微信">
                                    <i class="bi bi-wechat"></i>
                                    <span>微信</span>
                                </button>
                                <button class="share-btn link" onclick="copyLink()" title="复制链接">
                                    <i class="bi bi-link-45deg"></i>
                                    <span>复制链接</span>
                                </button>
                                <button class="share-btn print" onclick="window.print()" title="打印文章">
                                    <i class="bi bi-printer"></i>
                                    <span>打印</span>
                                </button>
                            </div>
                        </div>

                        <!-- Article Navigation -->
                        <div class="article-navigation">
                            <a href="{{ route('posts.index') }}" class="nav-btn back-to-list">
                                <i class="bi bi-arrow-left"></i>
                                <span>返回文章列表</span>
                            </a>
                            
                            <button class="nav-btn scroll-to-top" onclick="scrollToTop()" title="回到顶部">
                                <i class="bi bi-arrow-up"></i>
                                <span>回到顶部</span>
                            </button>
                        </div>
                    </div>
                </article>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <div class="article-sidebar">
                    <!-- Table of Contents -->
                    <div class="sidebar-widget toc-widget">
                        <h5 class="widget-title">
                            <i class="bi bi-list-ul"></i>
                            目录导航
                        </h5>
                        <div class="toc-content" id="tableOfContents">
                            <!-- TOC will be generated by JavaScript -->
                        </div>
                    </div>

                    <!-- Related Posts -->
                    @if($relatedPosts->count() > 0)
                        <div class="sidebar-widget related-posts-widget">
                            <h5 class="widget-title">
                                <i class="bi bi-collection"></i>
                                相关文章
                            </h5>
                            <div class="related-posts">
                                @foreach($relatedPosts as $relatedPost)
                                    <article class="related-post-item">
                                        <div class="related-post-content">
                                            <h6 class="related-post-title">
                                                <a href="{{ route('posts.show', $relatedPost->slug) }}">
                                                    {{ $relatedPost->title }}
                                                </a>
                                            </h6>
                                            <div class="related-post-meta">
                                                <span class="post-date">
                                                    <i class="bi bi-calendar3"></i>
                                                    {{ $relatedPost->published_at->format('m月d日') }}
                                                </span>
                                                @if($relatedPost->category)
                                                    <span class="post-category">
                                                        <i class="bi bi-folder"></i>
                                                        {{ $relatedPost->category->name }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </article>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Article Stats -->
                    <div class="sidebar-widget stats-widget">
                        <h5 class="widget-title">
                            <i class="bi bi-graph-up"></i>
                            文章统计
                        </h5>
                        <div class="stats-content">
                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="bi bi-eye"></i>
                                </div>
                                <div class="stat-info">
                                    <span class="stat-label">阅读量</span>
                                    <span class="stat-value">{{ rand(100, 9999) }}</span>
                                </div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="bi bi-chat-dots"></i>
                                </div>
                                <div class="stat-info">
                                    <span class="stat-label">评论数</span>
                                    <span class="stat-value">{{ rand(0, 50) }}</span>
                                </div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="bi bi-heart"></i>
                                </div>
                                <div class="stat-info">
                                    <span class="stat-label">点赞数</span>
                                    <span class="stat-value">{{ rand(5, 200) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="sidebar-widget actions-widget">
                        <h5 class="widget-title">
                            <i class="bi bi-lightning"></i>
                            快捷操作
                        </h5>
                        <div class="quick-actions">
                            <button class="action-btn bookmark" onclick="toggleBookmark()" title="收藏文章">
                                <i class="bi bi-bookmark"></i>
                                <span>收藏</span>
                            </button>
                            <button class="action-btn like" onclick="toggleLike()" title="点赞文章">
                                <i class="bi bi-heart"></i>
                                <span>点赞</span>
                            </button>
                            <button class="action-btn comment" onclick="scrollToComments()" title="查看评论">
                                <i class="bi bi-chat-dots"></i>
                                <span>评论</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
/* Article Hero Section */
.article-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 2rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.article-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.breadcrumb-modern {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.breadcrumb-modern .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.breadcrumb-modern .breadcrumb-item a:hover {
    color: white;
    transform: translateY(-1px);
}

.breadcrumb-modern .breadcrumb-item.active span {
    color: rgba(255, 255, 255, 0.7);
}

.article-header {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.category-badge:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    transform: translateY(-2px);
}

.article-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
}

.meta-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
}

.author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-avatar {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.author-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.author-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.author-role {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.tag-modern {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.tag-modern:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-1px);
}

/* Article Content */
.article-content-wrapper {
    background: var(--bg-color);
    padding: 3rem 0;
    margin-top: -2rem;
    position: relative;
    z-index: 1;
}

.article-main {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.article-cover {
    margin: -3rem -3rem 3rem;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.cover-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cover-image:hover {
    transform: scale(1.02);
}

.article-excerpt {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 3rem;
    position: relative;
    border-left: 4px solid var(--primary-color);
}

.excerpt-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.excerpt-icon {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.7;
    flex-shrink: 0;
}

.excerpt-content p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-color);
    margin: 0;
    font-style: italic;
}

/* Post Content Styles */
.post-content {
    line-height: 1.8;
    color: var(--text-color);
    font-size: 1.1rem;
}

.post-content h1, .post-content h2, .post-content h3, 
.post-content h4, .post-content h5, .post-content h6 {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
    font-weight: 600;
    line-height: 1.3;
}

.post-content h1 { font-size: 2rem; }
.post-content h2 { font-size: 1.75rem; }
.post-content h3 { font-size: 1.5rem; }
.post-content h4 { font-size: 1.25rem; }

.post-content p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.post-content blockquote {
    border-left: 4px solid var(--primary-color);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    border-radius: 10px;
    font-style: italic;
    position: relative;
}

.post-content blockquote::before {
    content: '"';
    font-size: 4rem;
    color: var(--primary-color);
    position: absolute;
    top: -10px;
    left: 20px;
    opacity: 0.3;
}

.post-content code {
    background: #f1f3f4;
    color: #d73a49;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: 'Fira Code', 'Consolas', monospace;
}

.post-content pre {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 10px;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 2rem 0;
    position: relative;
}

.post-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.post-content ul, .post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.post-content li {
    margin-bottom: 0.5rem;
}

/* Article Footer */
.article-footer {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid #f1f3f4;
}

.share-section {
    margin-bottom: 3rem;
}

.share-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
    font-weight: 600;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.875rem;
}

.share-btn.weibo {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
}

.share-btn.wechat {
    background: linear-gradient(135deg, #2ed573 0%, #1e90ff 100%);
    color: white;
}

.share-btn.link {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    color: white;
}

.share-btn.print {
    background: linear-gradient(135deg, #636e72 0%, #2d3436 100%);
    color: white;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: white;
}

.article-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    transition: all 0.3s ease;
    background: white;
}

.nav-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Sidebar Styles */
.article-sidebar {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.sidebar-widget {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f3f4;
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
    font-weight: 600;
    font-size: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f1f3f4;
}

.toc-content {
    max-height: 300px;
    overflow-y: auto;
}

.related-post-item {
    padding: 1rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.related-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-post-title a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.related-post-title a:hover {
    color: var(--primary-color);
}

.related-post-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stats-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.stat-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stat-value {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1rem;
}

.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e1e4e8;
    border-radius: 10px;
    background: white;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 500;
}

.action-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .article-title {
        font-size: 2rem;
    }
    
    .article-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .meta-divider {
        display: none;
    }
    
    .article-main {
        padding: 2rem 1.5rem;
    }
    
    .article-cover {
        margin: -2rem -1.5rem 2rem;
    }
    
    .share-buttons {
        justify-content: center;
    }
    
    .article-navigation {
        flex-direction: column;
        text-align: center;
    }
    
    .article-sidebar {
        position: static;
        margin-top: 2rem;
    }
}
</style>
@endpush

@push('scripts')
<script>
// 分享功能
function shareToWeibo() {
    const url = encodeURIComponent(window.location.href);
    const title = encodeURIComponent(document.title);
    window.open(`https://service.weibo.com/share/share.php?url=${url}&title=${title}`, '_blank', 'width=600,height=400');
}

function shareToWechat() {
    // 微信分享需要特殊处理，这里只是示例
    showToast('请复制链接在微信中分享：' + window.location.href, 'info');
}

function copyLink() {
    navigator.clipboard.writeText(window.location.href).then(function() {
        showToast('链接已复制到剪贴板', 'success');
    }).catch(function() {
        // 兼容性处理
        const textArea = document.createElement('textarea');
        textArea.value = window.location.href;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        showToast('链接已复制到剪贴板', 'success');
    });
}

function printArticle() {
    window.print();
}

// 快捷操作功能
function toggleBookmark() {
    const btn = document.querySelector('.action-btn.bookmark');
    const icon = btn.querySelector('i');
    const text = btn.querySelector('span');
    
    if (icon.classList.contains('bi-bookmark')) {
        icon.classList.remove('bi-bookmark');
        icon.classList.add('bi-bookmark-fill');
        text.textContent = '已收藏';
        btn.style.background = 'var(--primary-color)';
        btn.style.color = 'white';
        showToast('文章已收藏', 'success');
    } else {
        icon.classList.remove('bi-bookmark-fill');
        icon.classList.add('bi-bookmark');
        text.textContent = '收藏';
        btn.style.background = 'white';
        btn.style.color = 'var(--text-color)';
        showToast('已取消收藏', 'info');
    }
}

function toggleLike() {
    const btn = document.querySelector('.action-btn.like');
    const icon = btn.querySelector('i');
    const text = btn.querySelector('span');
    
    if (icon.classList.contains('bi-heart')) {
        icon.classList.remove('bi-heart');
        icon.classList.add('bi-heart-fill');
        text.textContent = '已点赞';
        btn.style.background = '#ff6b6b';
        btn.style.color = 'white';
        showToast('感谢您的点赞！', 'success');
    } else {
        icon.classList.remove('bi-heart-fill');
        icon.classList.add('bi-heart');
        text.textContent = '点赞';
        btn.style.background = 'white';
        btn.style.color = 'var(--text-color)';
        showToast('已取消点赞', 'info');
    }
}

function scrollToComments() {
    // 如果有评论区域，滚动到评论区域
    const commentsSection = document.querySelector('#comments');
    if (commentsSection) {
        commentsSection.scrollIntoView({ behavior: 'smooth' });
    } else {
        showToast('暂无评论功能', 'info');
    }
}

function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

// 目录导航生成
function generateTableOfContents() {
    const toc = document.getElementById('tableOfContents');
    const headings = document.querySelectorAll('.post-content h1, .post-content h2, .post-content h3, .post-content h4');
    
    if (headings.length === 0) {
        toc.innerHTML = '<p class="text-muted small">本文暂无目录</p>';
        return;
    }
    
    let tocHTML = '<ul class="toc-list">';
    
    headings.forEach((heading, index) => {
        const id = `heading-${index}`;
        heading.id = id;
        
        const level = parseInt(heading.tagName.charAt(1));
        const text = heading.textContent;
        
        tocHTML += `
            <li class="toc-item toc-level-${level}">
                <a href="#${id}" class="toc-link" onclick="scrollToHeading('${id}')">
                    ${text}
                </a>
            </li>
        `;
    });
    
    tocHTML += '</ul>';
    toc.innerHTML = tocHTML;
}

function scrollToHeading(id) {
    const element = document.getElementById(id);
    if (element) {
        element.scrollIntoView({ 
            behavior: 'smooth',
            block: 'start'
        });
        
        // 高亮当前标题
        document.querySelectorAll('.toc-link').forEach(link => {
            link.classList.remove('active');
        });
        document.querySelector(`a[href="#${id}"]`).classList.add('active');
    }
}

// Toast 提示功能
function showToast(message, type = 'info') {
    // 移除已存在的toast
    const existingToast = document.querySelector('.custom-toast');
    if (existingToast) {
        existingToast.remove();
    }
    
    const toast = document.createElement('div');
    toast.className = `custom-toast toast-${type}`;
    toast.innerHTML = `
        <div class="toast-content">
            <i class="bi bi-${getToastIcon(type)}"></i>
            <span>${message}</span>
        </div>
    `;
    
    document.body.appendChild(toast);
    
    // 显示动画
    setTimeout(() => {
        toast.classList.add('show');
    }, 100);
    
    // 自动隐藏
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 300);
    }, 3000);
}

function getToastIcon(type) {
    switch (type) {
        case 'success': return 'check-circle-fill';
        case 'error': return 'exclamation-circle-fill';
        case 'warning': return 'exclamation-triangle-fill';
        default: return 'info-circle-fill';
    }
}

// 阅读进度条
function initReadingProgress() {
    const progressBar = document.createElement('div');
    progressBar.className = 'reading-progress';
    progressBar.innerHTML = '<div class="reading-progress-bar"></div>';
    document.body.appendChild(progressBar);
    
    const progressBarFill = progressBar.querySelector('.reading-progress-bar');
    
    window.addEventListener('scroll', () => {
        const article = document.querySelector('.post-content');
        if (!article) return;
        
        const articleTop = article.offsetTop;
        const articleHeight = article.offsetHeight;
        const windowHeight = window.innerHeight;
        const scrollTop = window.pageYOffset;
        
        const progress = Math.min(
            Math.max((scrollTop - articleTop + windowHeight) / articleHeight, 0),
            1
        );
        
        progressBarFill.style.width = `${progress * 100}%`;
    });
}

// 图片懒加载和灯箱效果
function initImageEnhancements() {
    const images = document.querySelectorAll('.post-content img');
    
    images.forEach(img => {
        // 添加点击放大功能
        img.style.cursor = 'zoom-in';
        img.addEventListener('click', () => {
            showImageLightbox(img.src, img.alt);
        });
        
        // 添加加载动画
        img.addEventListener('load', () => {
            img.style.opacity = '1';
        });
    });
}

function showImageLightbox(src, alt) {
    const lightbox = document.createElement('div');
    lightbox.className = 'image-lightbox';
    lightbox.innerHTML = `
        <div class="lightbox-overlay" onclick="closeLightbox()">
            <div class="lightbox-content">
                <img src="${src}" alt="${alt}" class="lightbox-image">
                <button class="lightbox-close" onclick="closeLightbox()">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
        </div>
    `;
    
    document.body.appendChild(lightbox);
    document.body.style.overflow = 'hidden';
    
    setTimeout(() => {
        lightbox.classList.add('show');
    }, 10);
}

function closeLightbox() {
    const lightbox = document.querySelector('.image-lightbox');
    if (lightbox) {
        lightbox.classList.remove('show');
        document.body.style.overflow = '';
        setTimeout(() => {
            lightbox.remove();
        }, 300);
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    generateTableOfContents();
    initReadingProgress();
    initImageEnhancements();
    
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});

// 键盘快捷键
document.addEventListener('keydown', function(e) {
    // Ctrl/Cmd + D: 收藏文章
    if ((e.ctrlKey || e.metaKey) && e.key === 'd') {
        e.preventDefault();
        toggleBookmark();
    }
    
    // Ctrl/Cmd + L: 点赞文章
    if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
        e.preventDefault();
        toggleLike();
    }
    
    // Ctrl/Cmd + K: 复制链接
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        copyLink();
    }
    
    // ESC: 关闭灯箱
    if (e.key === 'Escape') {
        closeLightbox();
    }
});
</script>

<style>
/* Toast 样式 */
.custom-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    padding: 1rem 1.5rem;
    transform: translateX(100%);
    transition: all 0.3s ease;
    border-left: 4px solid var(--primary-color);
}

.custom-toast.show {
    transform: translateX(0);
}

.custom-toast.toast-success {
    border-left-color: #28a745;
}

.custom-toast.toast-error {
    border-left-color: #dc3545;
}

.custom-toast.toast-warning {
    border-left-color: #ffc107;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
    font-weight: 500;
}

.toast-content i {
    font-size: 1.2rem;
}

.toast-success .toast-content i { color: #28a745; }
.toast-error .toast-content i { color: #dc3545; }
.toast-warning .toast-content i { color: #ffc107; }
.toast-info .toast-content i { color: var(--primary-color); }

/* 阅读进度条 */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.reading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    width: 0%;
    transition: width 0.3s ease;
}

/* 目录样式 */
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-item {
    margin-bottom: 0.5rem;
}

.toc-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    line-height: 1.4;
}

.toc-link:hover,
.toc-link.active {
    background: var(--primary-color);
    color: white;
    transform: translateX(5px);
}

.toc-level-1 .toc-link {
    font-weight: 600;
    padding-left: 0.75rem;
}

.toc-level-2 .toc-link {
    padding-left: 1.5rem;
    font-size: 0.8rem;
}

.toc-level-3 .toc-link {
    padding-left: 2.25rem;
    font-size: 0.75rem;
}

.toc-level-4 .toc-link {
    padding-left: 3rem;
    font-size: 0.7rem;
}

/* 图片灯箱 */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-lightbox.show {
    opacity: 1;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .custom-toast {
        right: 10px;
        left: 10px;
        transform: translateY(-100%);
    }
    
    .custom-toast.show {
        transform: translateY(0);
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
    }
}
</style>
@endpush
@endsection